import type {WaveListItemType} from "@/components/st-wave/types/wave-list-item";
import type {GenWaveListPropType} from "@/components/st-wave/types/gen-wave-list-prop";

/**
 * 生成波浪图片列表。 <br/>
 * 对于方法的参数，如果为数组则单独为每个图片指定，否则为所有图片统一指定。<br/>
 * 使用该方法时，请将波浪的图片放在 `/static/waves/` 目录下，并且图片
 * 需要为 png 格式，同时图片文件命名符合 `wave-${i}.png`，其中 i 为
 * 1 2 3 ... <br/>
 * 波浪图片生成网站：https://quanxin.org/svg-wave-generator <br/>
 *
 * @param num 波浪列表项的个数
 * @param h 波浪图片的高度
 * @param opacity 波浪图片透明度，数组不为空时，单独为每个图片指定，
 * 同时 opacityGap 参数失效
 * @param opacityGap 波浪图片透明度间隔
 * @param animDur 动画执行周期所需时间，数组不为空时，单独为每个图片指定，
 * 同时 animDurStart animDurGap 参数失效
 * @param animDurStart 动画执行周期所需时间起步值
 * @param animDurGap 动画执行周期所需时间间隔
 * @param animDelay 动画执行延迟时间
 */
export default (
    {
        num = 1,
        h = '200rpx',
        opacity = [],
        opacityGap = 0.1,
        animDur = [],
        animDurStart = 10000,
        animDurGap = 5000,
        animDelay = 0
    }: GenWaveListPropType
) => {
    // 波浪列表
    const waveList: WaveListItemType[] = []
    for (let i = 0; i < num; i++) {
        waveList.push({
            url: `/static/waves/wave-${i + 1}.png`,
            height: typeof h === 'string' ? h : h[i],
            opacity: opacity.length === 0 ? 1 - opacityGap * (num - i) : opacity[i],
            animation: {
                duration: animDur.length === 0 ? animDurStart + animDurGap * i : animDur[i],
                delay: typeof animDelay === 'number' ? animDelay : animDelay[i],
            }
        })
    }
    return waveList
}